<template>
  <div class="page">
    <!--用来批量打印操作包含数据的模板-->
    <div :style="{width:'700px',margin:'0 auto',fontSize:'16px',color:'black',height:BrowserType.printPageHeight}" v-for="val in this.printDataArr">
      <div :style="{textAlign:'center',fontSize:'22px',fontWeight:'bold',margin:'-10px auto 40px auto', opacity: printDataNoShow,paddingTop:'10px'}">逾期还款催收函</div>
      <div>
        <p :style="{textAlign: 'left',textIndent: '2em'}">
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '120px'}">{{val.custName}}</span>
          <span :style="{opacity: printDataNoShow}">先生/女士:</span>
        </p>
        <p :style="{textIndent: '2em',textAlign: 'justify',lineHeight: '32px'}">
          <span :style="{opacity: printDataNoShow}">你案件编号为</span>
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '180px'}">{{val.cupoCasenum}}</span>
          <span :style="{opacity: printDataNoShow}">的借款合同本期应还款额</span>
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '150px'}">{{SomeSymbol.moneySymbol}}{{val.cupoAmt}}{{SomeSymbol.yuanSymbol}}</span>
          <span :style="{opacity: printDataNoShow}">，已还款额</span>
          <span :style="{display: 'inline-block',textSlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '150px'}">{{SomeSymbol.moneySymbol}}{{val.cupoPaysum}}{{SomeSymbol.yuanSymbol}}</span>
          <span :style="{opacity: printDataNoShow}">，现已逾期</span>
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '100px'}">{{val.cupoOverday}}{{SomeSymbol.daySymbol}}</span>
          <span :style="{opacity: printDataNoShow}">。请你务必积极筹措资金，按照合约约定，进行本息还款。</span>
        </p>
        <p :style="{textAlign: 'right',padding: '20px 110px 0px 0px',opacity: printDataNoShow}">
          特此通知！
        </p>
        <p :style="{textAlign: 'right',paddingRight: '80px'}">
          <span :style="{display: 'inline-block',width:'40px',textAlign: 'center'}">{{YMD.year}}</span>
          <span :style="{opacity: printDataNoShow}">年</span>
          <span :style="{display: 'inline-block',width:'30px',textAlign: 'center'}">{{YMD.month}}</span>
          <span :style="{opacity: printDataNoShow}">月</span>
          <span :style="{display: 'inline-block',width:'30px',textAlign: 'center'}">{{YMD.day}}</span>
          <span :style="{opacity: printDataNoShow}">日</span>
        </p>
      </div>
    </div>
    <!--用来单条数据打印操作包含数据的模板-->
    <div :style="{width:'700px',margin:'0 auto',fontSize:'16px',color:'black',height:'400px'}" v-for="val in this.PrintInfo">
      <div :style="{textAlign:'center',fontSize:'22px',fontWeight:'bold',margin:'-10px auto 40px auto', opacity: printDataNoShow}">逾期还款催收函</div>
      <div>
        <p :style="{textAlign: 'left',textIndent: '2em'}">
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '120px'}">{{val.custName}}</span>
          <span :style="{opacity: printDataNoShow}">先生/女士:</span>
        </p>
        <p :style="{textIndent: '2em',textAlign: 'justify',lineHeight: '32px'}">
          <span :style="{opacity: printDataNoShow}">你案件编号为</span>
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '180px'}">{{val.cupoCasenum}}</span>
          <span :style="{opacity: printDataNoShow}">的借款合同本期应还款额</span>
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '150px'}">{{SomeSymbol.moneySymbol}}{{val.cupoAmt}}{{SomeSymbol.yuanSymbol}}</span>
          <span :style="{opacity: printDataNoShow}">，已还款额</span>
          <span :style="{display: 'inline-block',textSlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '150px'}">{{SomeSymbol.moneySymbol}}{{val.cupoPaysum}}{{SomeSymbol.yuanSymbol}}</span>
          <span :style="{opacity: printDataNoShow}">，现已逾期</span>
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '100px'}">{{val.cupoOverday}}{{SomeSymbol.daySymbol}}</span>
          <span :style="{opacity: printDataNoShow}">。请你务必积极筹措资金，按照合约约定，进行本息还款。</span>
        </p>
        <p :style="{textAlign: 'right',padding: '20px 110px 0px 0px',opacity: printDataNoShow}">
          特此通知！
        </p>
        <p :style="{textAlign: 'right',paddingRight: '80px'}">
          <span :style="{display: 'inline-block',width:'40px',textAlign: 'center'}">{{YMD.year}}</span>
          <span :style="{opacity: printDataNoShow}">年</span>
          <span :style="{display: 'inline-block',width:'30px',textAlign: 'center'}">{{YMD.month}}</span>
          <span :style="{opacity: printDataNoShow}">月</span>
          <span :style="{display: 'inline-block',width:'30px',textAlign: 'center'}">{{YMD.day}}</span>
          <span :style="{opacity: printDataNoShow}">日</span>
        </p>
      </div>
    </div>
    <!--用来展示模板-->
    <div :style="{width:'700px',margin:'0 auto',fontSize:'16px',color:'black',height:'450px',display:sd}">
      <div :style="{textAlign:'center',fontSize:'22px',fontWeight:'bold',margin:'-10px auto 40px auto', opacity: printDataNoShow}">逾期还款催收函</div>
      <div>
        <p :style="{textAlign: 'left',textIndent: '2em'}">
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '120px'}"></span>
          <span :style="{opacity: printDataNoShow}">先生/女士:</span>
        </p>
        <p :style="{textIndent: '2em',textAlign: 'justify',lineHeight: '32px'}">
          <span :style="{opacity: printDataNoShow}">你案件编号为</span>
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '180px'}"></span>
          <span :style="{opacity: printDataNoShow}">的借款合同本期应还款额</span>
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '150px'}"></span>
          <span :style="{opacity: printDataNoShow}">，已还款额</span>
          <span :style="{display: 'inline-block',textSlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '150px'}"></span>
          <span :style="{opacity: printDataNoShow}">，现已逾期</span>
          <span :style="{display: 'inline-block',textAlign: 'left',lineHeight: '16px',borderWidth: noShowUnline,borderBottomStyle: 'solid',width: '100px'}"></span>
          <span :style="{opacity: printDataNoShow}">。请你务必积极筹措资金，按照合约约定，进行本息还款。</span>
        </p>
        <p :style="{textAlign: 'right',padding: '20px 110px 0px 0px',opacity: printDataNoShow}">
          特此通知！
        </p>
        <p :style="{textAlign: 'right',paddingRight: '80px',opacity: printDataNoShow}">
          <span :style="{display: 'inline-block',width:'40px',textAlign: 'center'}"></span>
          <span>年</span>
          <span :style="{display: 'inline-block',width:'30px',textAlign: 'center'}"></span>
          <span>月</span>
          <span :style="{display: 'inline-block',width:'30px',textAlign: 'center'}"></span>
          <span>日</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapMutations } from 'vuex'
  export default {
    name: 'letter-temp-one',
    data() {
      return {
        sd: 'none', // 展示模板的div默认不显示
        printDataNoShow: '1.0', // 默认显示
        noShowUnline: '1px' // 默认显示元素下边框
      }
    },
    props: ['printDataArr'],
    methods: {
      /**
       * 信函模板tab页激活时使使展示模板的div显示
       */
      ltShowTemp() {
        this.sd = ''
      },
      /**
       * 打印完成时刷新页面
       */
      refreshPage() {
        this.$reset()
      },
      /**
       * 点击打印数据按钮时改变模板一的样式
       */
      lt1ChangeStyle() {
        this.printDataNoShow = '0.0'
        this.noShowUnline = '0px'
      },
      ...mapMutations([
        'updatePrintInfo',
        'printSomeSymbol',
        'browserType',
        'printYmdDate'
      ])
    },
    computed: {
      ...mapState({
        PrintInfo: state => state.smartAcc.print_info,
        SomeSymbol: state => state.smartAcc.some_symbol,
        BrowserType: state => state.smartAcc.browser_type,
        YMD: state => state.smartAcc.ymd_date
      })
    }
  }

</script>
<style lang="less">


</style>
